<template>
	<view class="body">
		<view class="my-top" v-if='loginStatus'>
			<image class="img" :src="userInfo.avatarUrl" mode=""></image>
			<view class="top-info">
				<view class="my-name">{{userInfo.nickName}}</view>
				<!-- <view class="my-num">
					<text>130****1933</text>
				</view> -->
			</view>
			<view class="my-edit" @click="toEditUrl">
				<image src="../../../static/my/edit.png" mode=""></image>
				<view>编辑</view>
			</view>
		</view>
		<view style="padding: 0 0 0 60rpx;" class="my-top" v-else>
			<image class="img" src="../../../static/tabbar/08.png" mode=""></image>
			<view class="top-info">
				<button class='auth-btn' open-type="getUserInfo" @click="getUserInfo">授权登录</button>
			</view>
		</view>
		<view class="advise">
			<view class="advise-text">
				<view class="advise-t">暂无</view>
				<view class="advise-t2">我的评价</view>
			</view>
			<view class="advise-text">
				<view class="advise-t">暂无</view>
				<view class="advise-t2">优惠券</view>
			</view>
			<view class="advise-text">
				<view class="advise-t">暂无</view>
				<view class="advise-t2">我的车辆</view>
			</view>
		</view>
		<view class="order">
			<view class="order-f">
				<view class="first-t">我的订单</view>
				<view class="first-t1" @click="toOrderUrl">
					<view class="des">全部订单</view>
					<image src="../../../static/my/right.png" mode=""></image>
				</view>
			</view>
			<view class="order-info">
				<view class="info-t">
					<image src="../../../static/my/order-1.png" mode=""></image>
					<view class="text">待付款</view>
				</view>
				<view class="info-t">
					<image src="../../../static/my/order-2.png" mode=""></image>
					<view class="text">待车检</view>
				</view>
				<view class="info-t">
					<image src="../../../static/my/order-3.png" mode=""></image>
					<view class="text">已完成</view>
				</view>
				<view class="info-t">
					<image src="../../../static/my/order-4.png" mode=""></image>
					<view class="text">已取消</view>
				</view>
			</view>
		</view>
		<view class="middle">
			<view class="middle-text">
				<image class="middle-img" src="../../../static/my/order-5.png" mode=""></image>
				<view class="text-des">代驾代办车检订单</view>
				<image class="middle-img1" src="../../../static/my/right.png" mode=""></image>
			</view>
			<view class="middle-text">
				<image class="middle-img" src="../../../static/my/order-5.png" mode=""></image>
				<view class="text-des">车检站买单订单</view>
				<image class="middle-img1" src="../../../static/my/right.png" mode=""></image>
			</view>
		</view>
		<view class="footer">
			<view class="footer-text">
				<image class="footer-img" src="../../../static/my/order-6.png" mode=""></image>
				<view class="text-des">免检车标代办服务</view>
				<image class="footer-img1" src="../../../static/my/right.png" mode=""></image>
			</view>


			<view class="footer-text" @click="isShow">
				<image class="footer-img" src="../../../static/my/order-7.png" mode=""></image>
				<view class="text-des">兑换优惠</view>
				<image class="footer-img1" src="../../../static/my/right.png" mode=""></image>
			</view>
			<view class="mask" v-show="dialog">
				<view class="box">
					<view class="box-top">
						<view class="text">兑换优惠</view>
						<image src="../../../static/my/order-14.png" mode="" @tap="close1"></image>
					</view>
					<view class="int"><input class="inp" type="type" placeholder="请输入兑换码" /></view>
					<view class="submit">
						<button type="default">立即兑换</button>
					</view>
				</view>
			</view>


			<view class="footer-text">
				<image class="footer-img" src="../../../static/my/order-8.png" mode=""></image>
				<view class="text-des">关于我们</view>
				<image class="footer-img1" src="../../../static/my/right.png" mode=""></image>
			</view>
			<view class="footer-text" @click="toOpinionUrl">
				<image class="footer-img" src="../../../static/my/order-9.png" mode=""></image>
				<view class="text-des">意见反馈</view>
				<image class="footer-img1" src="../../../static/my/right.png" mode=""></image>
			</view>
			<view class="footer-text" @click="toServiceUrl">
				<image class="footer-img" src="../../../static/my/order-10.png" mode=""></image>
				<view class="text-des">我的客服</view>
				<image class="footer-img1" src="../../../static/my/right.png" mode=""></image>
			</view>
			<view class="footer-text">
				<image class="footer-img" src="../../../static/my/order-11.png" mode=""></image>
				<view class="text-des">下载九益车APP</view>
				<image class="footer-img1" src="../../../static/my/right.png" mode=""></image>
			</view>
			<view class="footer-text" @click="toSetUrl">
				<image class="footer-img" src="../../../static/my/order-12.png" mode=""></image>
				<view class="text-des">设置</view>
				<image class="footer-img1" src="../../../static/my/right.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				userInfo:{},
				dialog: false,
			}
		},
		computed:{
			loginStatus(){
				return this.$store.state.user.loginStatus
			},
		},
		onLoad() {
			let info = uni.getStorageSync('userInfo');
			if(info){
				this.userInfo = info;
			};
		},
		methods: {
			toEditUrl() {
				uni.navigateTo({
					url: "./edit/index"
				})
			},
			toOrderUrl() {
				uni.navigateTo({
					url: "./order/index"
				})
			},
			toSetUrl() {
				uni.navigateTo({
					url: "./set/index"
				})
			},
			toServiceUrl() {
				uni.navigateTo({
					url: "./service/index"
				})
			},
			toOpinionUrl() {
				uni.navigateTo({
					url: "./opinion/index"
				})
			},
			isShow() {
				this.dialog = true;
			},
			close1() {
				this.dialog = false;
			},
			/*
			* 微信授权
			* 
			*/
		   getUserInfo(){
			   let vm = this;
			    wx.getUserProfile({
					desc: '用于完善会员资料', 
					success:function(res){
						console.log(res)
						vm.$store.commit('updateUserInfo',res.userInfo);
						vm.userInfo = res.userInfo;
						var loginData = {};
						loginData.encryptedData = res.encryptedData;
						loginData.iv = res.iv;
						wx.login({
							success: async function(log) {
								let code = log.code;
								let e = await vm.$H.get(`auth_login_with_wechat/code?code=${code}`);
								let { data } = e;
								if(data.code == 1){
									loginData.sessionKey = data.data.session_key;
									loginData.openid = data.data.openid;
									vm.$H.post('auth_login_with_wechat/login',loginData).then(ret=>{
										if(ret.data.code == 1){
											uni.setStorageSync('token',ret.data.data.token);
											vm.$store.commit('initUser');
										};
									});
								}else{
									uni.showToast({
										title:'登录失败',
										icon:'none'
									})
								};
							}
						})
					},
					fail:function(err){
						console.log("获取失败: ",err)
					}
			   })
		   }
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F5F9;
	}

	.body {
		width: 96%;
		margin: 0 auto;

		.my-top {
			display: flex;
			margin-top: 25rpx;
			align-items: center;

			.img {
				background-color: #999999;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}

			.top-info {
				margin-left: 30rpx;
				.auth-btn{
					background: none;
					color: #000000;
					font-weight: 700;
					font-size: 35rpx;
				}
				.auth-btn::after{
					border: 0 !important;
				}
				.my-name {
					color: #000000;
					font-weight: 700;
					font-size: 35rpx;
					padding-bottom: 12rpx;
					padding-left: 12rpx;
				}

				.my-num {
					border: 1rpx solid #000000;
					background-color: #555555;
					border-radius: 30rpx;

					text {
						color: #FFFFFF;
						padding: 20rpx;
					}
				}
			}

			.my-edit {
				display: flex;
				align-items: center;
				margin-left: 240rpx;

				image {
					width: 32rpx;
					height: 32rpx;
				}

				view {
					color: #000000;
					margin-left: 10rpx;
				}
			}
		}

		.advise {
			margin-top: 45rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.advise-text {
				text-align: center;

				.advise-t {
					color: #000000;
					font-weight: 700;
					font-size: 35rpx;
					margin-bottom: 15rpx;
				}

				.advise-t2 {
					color: #999999;
					font-size: 25rpx;
				}
			}
		}

		.order {
			background-color: #FFFFFF;
			margin-top: 30rpx;

			.order-f {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 16rpx 20rpx;

				.first-t {
					color: #000000;
					font-weight: 800;
					font-size: 35rpx;
				}

				.first-t1 {
					display: flex;
					align-items: center;

					.des {
						color: #999999;
						font-size: 35rpx;
						margin-right: 20rpx;
					}

					image {
						width: 14rpx;
						height: 28rpx;
					}
				}
			}

			.order-info {
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding-bottom: 20rpx;
				padding-top: 20rpx;

				.info-t {
					image {
						width: 54rpx;
						height: 54rpx;
					}

					.text {
						color: #000000;
						font-size: 20rpx;
					}
				}
			}
		}

		.middle {
			margin-top: 20rpx;

			.middle-text {
				position: relative;
				display: flex;
				align-items: center;
				background-color: #FFFFFF;
				padding: 15rpx;
				margin-top: 30rpx;

				.middle-img {
					width: 46rpx;
					height: 46rpx;
				}

				.text-des {
					color: #000000;
					font-size: 30rpx;
					font-weight: 700;
					margin-left: 20rpx;
				}

				.middle-img1 {
					position: absolute;
					right: 20rpx;
					width: 14rpx;
					height: 28rpx;
				}
			}
		}

		.footer {
			margin-top: 20rpx;

			.footer-text {
				position: relative;
				display: flex;
				align-items: center;
				background-color: #FFFFFF;
				padding: 15rpx;

				.footer-img {
					width: 46rpx;
					height: 46rpx;
				}

				.text-des {
					color: #000000;
					font-size: 30rpx;
					font-weight: 700;
					margin-left: 20rpx;
				}

				.footer-img1 {
					position: absolute;
					right: 20rpx;
					width: 14rpx;
					height: 28rpx;
				}
			}

			.mask {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
				z-index: 99;

				.box {
					position: absolute;
					top: 50%;
					left: 50%;
					margin: -50% 0 0 -45%;
					width: 90%;
					border-radius: 30rpx;
					background-color: #FFFFFF;

					.box-top {
						position: relative;
						display: flex;
						align-items: center;
						padding: 30rpx;

						.text {
							color: #000000;
							font-size: 40rpx;
							font-weight: 700;
							margin: 0 auto;
						}

						image {
							position: absolute;
							right: 30rpx;
							top: 28rpx;
							width: 34rpx;
							height: 34rpx;
						}
					}

					.int {
						.inp {
							width: 80%;
							border-radius: 20rpx;
							background-color: #F7F7F7;
							margin: 0 auto;
							min-height: 70rpx;
							margin-bottom: 30rpx;
						}
					}
				}

				.submit {
					margin-top: 60rpx;
					height: 140rpx;

					button {
						width: 60%;
						height: 100rpx;
						color: #FFFFFF;
						background: #3179F3;
						border-radius: 10rpx;
					}
				}
			}
		}
	}
</style>
